<extend name="./Application/Admin/View/Layouts/application.html"/>

<block name="content">

    <form class="am-form admin-content" action="{{:U('Advert/add')}}" method="post">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">新增广告</strong> /
                    <small>Create Advert</small>
                </div>
            </div>

            <hr>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active">

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            名称
                        </div>
                        <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                            <input type="text" name="title" required class="am-input-sm">
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            缩略图
                        </div>
                        <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                            <div class="upload_one am-icon-cloud-upload am-btn am-btn-default"></div>
                            <div class="view_one">
                                <input type="hidden" name="thumb">
                                <img src="" class="am-img-responsive" style="margin-top: 8px;max-height: 60px;">
                            </div>
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            广告地址
                        </div>
                        <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                            <input type="text" name="url" class="am-input-sm">
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            排序
                        </div>
                        <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                            <input type="text" name="sort_order" class="am-input-sm">
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            广告描述
                        </div>
                        <div class="am-u-sm-8 am-u-md-5 am-u-end col-end">
                            <textarea name="description" cols="30" rows="5"></textarea>
                        </div>
                    </div>

                    <div>
                        <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
                        <button type="button" class="am-btn am-btn-warning am-btn-xs">放弃保存</button>
                    </div>
                </div>

            </div>
        </div>
    </form>

    <footer class="admin-content-footer">
        <hr>
        <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </footer>
</block>

<block name="js">
    <script src="__PUBLIC__/vendor/bootstrapextend/js/bootstrap.extend.js"></script>

    <script charset="utf-8" src="__PUBLIC__/vendor/validate/jquery.validate.min.js"></script>
    <script charset="utf-8" src="__PUBLIC__/vendor/validate/localization/messages_zh.js"></script>

    <script>
        $(function () {
            //js自动验证
            $(".am-form").validate({
                onfocusout: function (element) {
                    $(element).valid();
                }
            });

            //上传单张图片
            $('.upload_one').Huploadify({
                uploader: '{{:U("Admin/Uploadfile/upload")}}',
                fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png;*.bmp',
                //fileSizeLimit:{:C('UPLOAD_IMAGE_SIZE')}*1024,
                buttonText: '上 传 图 片',
                onUploadComplete: function (file, data) {
                    data = $.parseJSON(data);
                    $('.view_one img').attr('src', data.real_path);
                    $('.view_one input').attr('value',data.real_path);

                }
            });

            //删除图片 <i class="glyphicon glyphicon-remove-sign remove-picture"></i>
            $('#view_more').on('click', '.remove-picture', function () {
                var ready_for_remove_id = $(this).closest('.img-box').find('img').attr('data-id'); //获取待删除的图片ID
                if (!ready_for_remove_id) {
                    alertMessager('错误');
                }
                var current_picture_ids = $('#view_more input').val().split(","); //获取当前图集以逗号分隔的ID并转换成数组
                current_picture_ids.remove(ready_for_remove_id); //从数组中删除待删除的图片ID
                $('#view_more input').val(current_picture_ids.join(',')) //删除后覆盖原input的值
                $(this).closest('.img-box').remove(); //删除图片预览图
            });
        });

    </script>

</block>